<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view class="child-view" />
    </transition>
    <!-- <div class="footer" @click='jump'>
      <div><img :src="currentTab == 'tab1' ? EMKnowledge_1 : EMKnowledge_2" data-index='1'></div>
      <div><img :src="currentTab == 'tab2' ? EMFun_1 : EMFun_2" data-index='2'></div>
      <div><img :src="currentTab == 'tab3' ? EMMine_1 : EMMine_2" data-index='3'></div>
      <div class="line" :class="currentTab"></div>
    </div> -->
  </div>
</template>

<script>
import { autoFontSize } from '@/assets/js/util'
// const EMKnowledge_1 = require('@/assets/img/1-1hdpi.png')
// const EMKnowledge_2 = require('@/assets/img/1-2hdpi.png')
// const EMFun_1 = require('@/assets/img/2-1hdpi.png')
// const EMFun_2 = require('@/assets/img/2-2hdpi.png')
// const EMMine_1 = require('@/assets/img/3-1hdpi.png')
// const EMMine_2 = require('@/assets/img/3-2hdpi.png')
export default {
  name: 'app',
  data () {
    return {
      // EMKnowledge_1: EMKnowledge_1,
      // EMKnowledge_2: EMKnowledge_2,
      // EMFun_1: EMFun_1,
      // EMFun_2: EMFun_2,
      // EMMine_1: EMMine_1,
      // EMMine_2: EMMine_2,
      // currentTab: 'tab1',
      transitionName: 'slide-left'
    }
  },
  mounted () {
    autoFontSize()
  },
  // watch: {  
  //   '$route' (to, from) {  
  //     if(to.path == '/'){  
  //       this.transitionName = 'slide-right';  
  //     }else{  
  //       this.transitionName = 'slide-left';  
  //     }  
  //   }  
  // },
  // methods: {
  //   jump (e) {
  //     let _this =this
  //     let index = e.target.dataset.index;
  //     index && (_this.currentTab = 'tab'+index)
  //     switch (index) {
  //       case '1': _this.$router.push({ path: '/wxemknowledge2' })
  //         break
  //       case '2': _this.$router.push({ path: '/wxemfun' })
  //         break
  //       case '3': _this.$router.push({ path: '/wxemmine' })
  //         break
  //     }
  //   }
  // }
}
</script>

<style lang="stylus">
@import '/assets/css/init'
#app {
  width: 100%
}
// .footer {
//   width: 100%
//   height: 1rem
//   background: $White
//   position: fixed
//   bottom: 0
//   border-top: 1px solid $dWhite
//   z-index: 1000
//   $row()
//   div {
//     flex: 1
//     $row()
//     $flex-vc()
//     $flex-ac()
//     img {
//       width 1rem
//       height: 1rem
//     }
//   }
//   .line {
//     position: absolute
//     bottom: 0
//     width: 1rem
//     height .1rem 
//     background: $green
//     -webkit-transition: all .2s ease
//        -moz-transition: all .2s ease
//          -o-transition: all .2s ease
//             transition: all .2s ease
//     &.tab1 {
//       left: calc(7.5rem - 6.75rem);
//     }
//     &.tab2 {
//       left: calc(7.5rem - 4.25rem);
//     }
//     &.tab3 {
//       left: calc(7.5rem - 1.75rem);
//     }
//   }
// }
.child-view {  
  position: absolute;  
  left: 0;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  transition: all .5s ease;  
}  
.slide-left-enter, .slide-right-leave-active {  
  opacity: 0;  
  -webkit-transform: translate(30px, 0);  
  transform: translate(30px, 0);  
}  
.slide-left-leave-active, .slide-right-enter {  
  opacity: 0;  
  -webkit-transform: translate(-30px, 0);  
  transform: translate(-30px, 0);  
}  
</style>
